import { ProCard } from "@ant-design/pro-components"
import { Col, Row } from "antd"

const boxStyle: React.CSSProperties = {
    borderRadius: '50%',
    position: 'relative',
    width: 100,
    height: 100,
    overflow: 'hidden'
}

const imgStyle: React.CSSProperties = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    display: 'block',
    minWidth: '100%',
    minHeight: '100%',
    transform: 'translate(-50%,-50%)'
}

const divStyle: React.CSSProperties = {
    float: 'right',
    position: 'relative',
    top: 10,
    width: 115,
    textAlign: 'left'
}

const Card = () => {
    return (
        <>
            <Row justify={'center'} style={{ marginTop: 100, marginBottom: 100 }}>
                <Col span={7}>
                    <ProCard
                        style={{ maxWidth: 300, margin: '0 auto' }}
                        boxShadow
                    >
                        <div style={divStyle}>专业电商后台管理系统</div>
                        <div style={boxStyle}><img style={imgStyle} src={'https://env-00jxgt5r6in3.normal.cloudstatic.cn/canvas.png?expire_at=1718629781&er_sign=313e7ab88586c9573a865ccf199dd0f9'} alt="" /></div>
                    </ProCard>
                </Col>
                <Col span={7}>
                    <ProCard
                        style={{ maxWidth: 300,margin: '0 auto' }}
                        boxShadow
                    >
                        <div style={divStyle}>专业电商后台管理系统</div>
                        <div style={boxStyle}><img style={imgStyle} src={'https://env-00jxgt5r6in3.normal.cloudstatic.cn/canvas.png?expire_at=1718629781&er_sign=313e7ab88586c9573a865ccf199dd0f9'} alt="" /></div>
                    </ProCard>
                </Col>
                <Col span={7}>
                    <ProCard
                        style={{ maxWidth: 300,margin: '0 auto' }}
                        boxShadow
                    >
                        <div style={divStyle}>专业电商后台管理系统</div>
                        <div style={boxStyle}><img style={imgStyle} src={'https://env-00jxgt5r6in3.normal.cloudstatic.cn/canvas.png?expire_at=1718629781&er_sign=313e7ab88586c9573a865ccf199dd0f9'} alt="" /></div>
                    </ProCard>
                </Col>
            </Row>
        </>
    )
}

export default Card